<template>
<div class="editadvertise-main">

    <el-card class="card">
        <div slot="header" v-if="advertise.id" class="header">编辑广告</div>

        <div slot="header" v-else class="header">新增广告</div>
        <div>
            <el-form ref="advertise" :model="advertise" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="广告名称">
                            <el-input v-model="advertise.name" placeholder="请输入广告名字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品id">
                            <el-input v-model="advertise.productId" placeholder="请输入商品id"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="广告排序">
                            <el-input v-model="advertise.sort " placeholder="广告排序"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="点击数量">
                            <el-input v-model="advertise.clickCount" placeholder="请输入广告点击数量"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="下单数量">
                            <el-input v-model="advertise.orderCount " placeholder="请输入下单数量"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="轮播位置">
                            <el-switch v-model="advertise.type" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="开始日期">
                            <el-date-picker v-model="advertise.startTime" type="date" placeholder="请选择广告开始日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="结束日期">
                            <el-date-picker v-model="advertise.endTime" type="date" placeholder="请选择广告结束日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="链接地址">
                            <el-input v-model="advertise.url" placeholder="广告链接地址"></el-input>
                        </el-form-item>
                    </el-col>
                   

                </el-row>
                <el-row :gutter="10">
                    <el-col :span="16">
                        <el-form-item label="上传图片">
                            <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                <img v-if="advertise.pic " :src="advertise.pic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <div class="el-upload__tip" v-if="!advertise.pic">只能上传jpg/png/gif文件，且不超过1.5M</div>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="上下线状态" label-width="100">
                            <el-switch v-model="advertise.status" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                   
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8" :offset="6">
                        <el-button type="primary" @click="resetAdvertise">重置</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="submitAdvertise">提 交</el-button>
                    </el-col>
                </el-row>
            </el-form>

        </div>
    </el-card>
</div>
</template>

<script>
import {
    getToken
} from '@/utils/myAuth'

import {
    addAds,
    updateAds
} from '@/api/advertise/index'
export default {
    components: {

    },
    data() {
        return {
            advertise: {
                pic: ''
            },

        };
    },
    computed: {
        headers() {
            return {
                token: getToken()
            }
        },
    },
    created() {
        if (this.$route.query.item) {
            this.advertise = this.$route.query.item
        }

    },
    mounted() {

    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log(res);
            if (res.success) {
                this.advertise.pic = res.data.fileUrl
            }
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
        resetAdvertise() {
            this.advertise={pic:''}

        },
        submitAdvertise() {
            console.log(this.advertise);
               this.$confirm('确认提交吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           if (this.advertise.id) {
              
                updateAds(this.advertise).then(res => {
                    if (res.success) {
                        this.$message.success('编辑成功了')
                        this.$router.push({
                            name: "advertiseList"
                        })
                    } else {
                        this.$message.error('编辑失败了')
                    }
                })

            } else {
                addAds(this.advertise).then(res => {
                    // console.log(res);
                    if (res.success) {
                        this.$message.success('新增成功了')
                        this.$router.push({
                            name: "advertiseList"
                        })
                    } else {
                        this.$message.error('新增失败了')

                    }
                })
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });          
        });
          
        }

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 30px;

    .header {
        font-weight: bolder;
        color: rgb(209, 50, 50);
        font-size: 22px;
    }
}

.avatar-uploader {
    width: 120px;
    height: 120px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
        border-radius: 10px;

    }

}
</style>
